@use "../../shared/settings/colors"
@use "../../shared/settings/fonts"
@use "../_extends/text-input"
@use "../_extends/select-input"
@use "../_extends/buttons"


form#torch-form
  background-color: colors.$white
  display: flex
  padding: 20px

  .torch-form-error
    background-color: colors.$orange
    color: colors.$white
    margin-bottom: 20px
    padding: 5px
    text-align: center

  .torch-form-group
    align-items: center
    display: flex
    flex-wrap: wrap
    margin-bottom: 20px

    label
      display: flex
      align-items: center
      justify-content: flex-end
      font-size: 15px
      font-family: fonts.$helvetica-neue
      color: colors.$dark-gray
      flex: 1
      text-align: right
      margin-right: 20px

    input[type="text"],
    input[type="password"],
    textarea
      @extend %text-input
      flex: 1

    input[type="number"],
    input[type="datetime-local"]
      @extend %text-input

    select
      @extend %select-input

    .help-block
      margin-left: calc(30% + 12px)
      width: 70%
      text-transform: capitalize
      color: colors.$orange
      font-size: 14px

  .torch-form-group-input
    align-items: center
    display: flex
    flex: 3
    flex-wrap: wrap

    select:first-child
      margin-left: 0

    select
      margin-right: 0.5em
      margin-left: 0.5em

    .form-field-error
      border: 1px solid red !important

    .invalid-feedback
      flex: 1
      margin-left: 1rem
      color: red

  .torch-submit-form
    display: flex
    justify-content: flex-end

    .torch-submit-button
      @extend %red-button
